```d2
---
title: Service Architecture
width: 90vw
height: 520px
layout: elk
---
direction: right
clients: {
  web: {
    label: Web App
    icon: "https://api.iconify.design/mdi:web.svg"
  }
  mobile: {
    label: Mobile App
    icon: "https://api.iconify.design/mdi:cellphone.svg"
  }
}

edge: {
  gateway: {
    label: API Gateway
    icon: "https://api.iconify.design/mdi:router-network.svg"
  }
  auth: {
    label: Auth Service
    icon: "https://api.iconify.design/mdi:shield-lock.svg"
  }
}

core: {
  orders: {
    label: Orders Service
    icon: "https://api.iconify.design/mdi:cart-outline.svg"
  }
  payments: {
    label: Payments Service
    icon: "https://api.iconify.design/mdi:credit-card-outline.svg"
  }
  catalog: {
    label: Catalog Service
    icon: "https://api.iconify.design/mdi:view-grid-outline.svg"
  }
}

data: {
  postgres: {
    label: Postgres
    icon: "https://api.iconify.design/logos:postgresql.svg"
  }
  redis: {
    label: Redis
    icon: "https://api.iconify.design/logos:redis.svg"
  }
  queue: {
    label: Event Queue
    icon: "https://api.iconify.design/mdi:queue.svg"
  }
}

clients.web -> edge.gateway
clients.mobile -> edge.gateway
edge.gateway -> edge.auth
edge.gateway -> core.orders
edge.gateway -> core.payments
edge.gateway -> core.catalog

core.orders -> data.postgres
core.payments -> data.postgres
core.catalog -> data.redis
core.orders -> data.queue
```